<template>
  <div>
    <van-loading size="24px" vertical v-if="isShow">加载中...</van-loading>
    <div class="newContainer" v-else>
      <ul>
        <li v-for="item in nbaNewData" :key="item.标题链接" @click="toDetailPage(item.标题)">
          <div class="new-left">
            <span class="NewsItem_p-title">{{ item.标题 }}</span>
            <van-tag plain type="danger">热评{{ item.评论 }}</van-tag>
          </div>
          <div class="new-right">
            <div class="img_container">
              <!-- <img
              :src="item.图片"
              alt="123"
            /> -->
              <img v-imgUrl="item.图片" alt="123" />
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nbaNewData: [],
      isShow: true,
    };
  },
  methods: {
    getNbaDataList() {
      this.$http.get("/api/nba").then((res) => {
        if (res.status == 200) {
          this.nbaNewData = res.data;
          this.isShow = false;
        }
      });
    },
    toDetailPage(newTitle){
      this.$router.push({name:'赛事详情',query:{title:'篮球咨询',newtitle:newTitle}})
    }
  },
  created() {
    // this.getNbaDataList()
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        if (this.$route.name == "NBA") {
          this.getNbaDataList();
        }
      },
    },
  },
  // 未加载的图片设置背景颜色为灰色
  directives: {
    imgUrl(el, binding) {
      el.style.backgroundColor = "#FEFEFE"; //设置背景颜色
      let img = new Image();
      img.src = binding.value; // binding.value 指令后的参数
      img.onload = function () {
        el.style.backgroundColor = "";
        el.src = binding.value;
      };
    },
  },
};
</script>

<style lang="less" scoped>
@primary_fontSize: 0.4rem;

.newContainer {
  width: 100%;
  // height: 23rem;
  // background-color: pink;
  ul {
    width: 100%;
    // height: 1.0667rem;
    li {
      display: inline-block;
      margin-top: 0.2rem;
      width: 100%;
      height: 2rem;
      border-bottom: 1px solid #efefef;
      display: flex;
      .new-left {
        flex: 7;
        padding-left: 0.3rem;
        .NewsItem_p-title {
          display: -webkit-box;
          margin-right: 3.467vw;
          overflow: hidden;
          color: #191c22;
          font-weight: 400;
          font-size: @primary_fontSize;
          line-height: 6.4vw;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
      .new-right {
        flex: 3;
        .img_container {
          width: 2.8rem;
          height: 1.6rem;
          img {
            border-radius: 0.055rem;
            width: 100%;
            height: 100%;
            overflow: hidden;
            object-fit: cover;
          }
        }
      }
    }
  }
}
</style>